@import './space.scss';
@import './flex.scss';
@import './color.scss';
@import './border.scss';
@import './font.scss';
@import './position.scss';
@import './text.scss';
@import './shadow.scss';
@import './text.scss';
.disabled {
    opacity: .3;
    pointer-events: none;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.tl {
    text-align: left;
}

.tc {
    text-align: center;
}

.tr {
    text-align: right;
}

.ofax {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

.ofay {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

.ofa {
    @extend .ofax,
    .ofay;
}

.ofx {
    overflow-x: hidden;
}

.ofy {
    overflow-y: hidden;
}

.of {
    @extend .ofx,
    .ofy;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.full {
    @extend .full-width,
    .full-height;
}

.window-height {
    height: 100vh;
}

.window-width {
    width: 100vw;
}

.block {
    display: block;
}

$square: (32, 48, 64, 86, 120);
@each $var in $square {
    .square#{$var} {
        width: $var * 1px;
        height: $var * 1px;
    }
}

$height:20 26 28 30 32 36 38 40 44 50 54 60;
@each $h in $height {
    .h#{$h} {
        height: $h * 1px;
    }
    .middle-h#{$h} {
        height: $h * 1px;
        line-height: $h * 1px;
    }
}

$rotate: (45, 90, 135, 180, 205, 270, 315);
@each $i in $rotate {
    .rotate-#{$i} {
        transform: rotate(#{$i}deg);
    }
}

//清除浮动
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

.floated {
    float: left;
}

.square::before {
    content: '';
    padding-top: 100%;
    float: left;
}

.square::after {
    content: '';
    display: block;
    clear: both;
}
